<template>
  <div id="app">
    <FlowDiagram :content-list="contentList" :active-steps="activeSteps" />
    <IvuDatePickerGroup />
    <!-- <DatePicker
      :startTime="dateRange[0]"
      :endTime="dateRange[1]"
      @update:date-range="val => (dateRange = val)"
    /> -->
    <!-- <DatePicker /> -->
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      activeSteps: 0,
      contentList: [
        [
          { title: "step1-1", description: "this is step1-1" },
          { title: "step1-2", description: "this is step1-2" }
        ],
        [
          { title: "step2", description: "this is step2" }
          // { title: 'step2', description: 'this is step2' },
        ],
        [
          { title: "step3", description: "this is step3" }
          // { title: 'step3-1', description: 'this is step3-1' },
          // { title: 'step3-2', description: 'this is step3-2' },
          // { title: 'step3-3', description: 'this is step3-3' },
          // { title: 'step3-2', description: 'this is step3-2' },
        ],
        [
          { title: "step4", description: "this is step4" },
          { title: "step4-1", description: "this is step4-1" }
          // { title: 'step4', description: 'this is step4' },
        ]
      ],
      dateRange: ["", ""]
    };
  }
};
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
